<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>存储操作测试例子</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
            padding: 15px;
            background-color: #ecf0f1;
            border-radius: 8px;
        }
        .测试容器 {
            background-color: white;
            padding: 25px;
            margin-bottom: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
        }
        h3 {
            color: #2980b9;
            margin-top: 20px;
        }
        .按钮组 {
            margin-bottom: 20px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
        }
        .结果显示 {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            min-height: 80px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            margin-top: 15px;
        }
        .输入组 {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 120px;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="number"] {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 200px;
        }
        .提示 {
            background-color: #e8f4f8;
            border-left: 4px solid #3498db;
            padding: 10px 15px;
            margin: 15px 0;
            border-radius: 0 4px 4px 0;
        }
        .表格容器 {
            overflow-x: auto;
            margin-top: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .对比区域 {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        .对比区域 > div {
            flex: 1;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        .状态指示器 {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 5px;
        }
        .可用 {
            background-color: #27ae60;
        }
        .不可用 {
            background-color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>存储操作测试例子</h1>
    
    <!-- 存储状态测试 -->
    <div class="测试容器">
        <h2>1. 存储可用性检查</h2>
        <div class="按钮组">
            <button id="check-local-storage">检查本地存储</button>
            <button id="check-session-storage">检查会话存储</button>
        </div>
        <div id="storage-availability-result" class="结果显示">点击按钮查看存储可用性</div>
    </div>

    <!-- 基本存储操作测试 -->
    <div class="测试容器">
        <h2>2. 基本存储操作</h2>
        <div class="输入组">
            <label for="basic-key">键名:</label>
            <input type="text" id="basic-key" placeholder="输入键名">
        </div>
        <div class="输入组">
            <label for="basic-value">值:</label>
            <input type="text" id="basic-value" placeholder="输入值">
        </div>
        <div class="输入组">
            <label for="expire-time">过期时间(毫秒):</label>
            <input type="number" id="expire-time" placeholder="可选，默认永不过期" min="0">
        </div>
        <div class="按钮组">
            <button id="store-data">存储数据</button>
            <button id="read-data">读取数据</button>
            <button id="delete-data">删除数据</button>
            <button id="check-data">检查数据是否存在</button>
        </div>
        <div id="basic-operation-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 本地存储和会话存储切换测试 -->
    <div class="测试容器">
        <h2>3. 本地存储与会话存储对比</h2>
        <div class="对比区域">
            <div>
                <h3>本地存储 (localStorage)</h3>
                <div class="输入组">
                    <label for="local-key">键名:</label>
                    <input type="text" id="local-key" placeholder="输入键名">
                </div>
                <div class="输入组">
                    <label for="local-value">值:</label>
                    <input type="text" id="local-value" placeholder="输入值">
                </div>
                <button id="store-local">存储到本地</button>
                <button id="read-local">读取本地数据</button>
            </div>
            <div>
                <h3>会话存储 (sessionStorage)</h3>
                <div class="输入组">
                    <label for="session-key">键名:</label>
                    <input type="text" id="session-key" placeholder="输入键名">
                </div>
                <div class="输入组">
                    <label for="session-value">值:</label>
                    <input type="text" id="session-value" placeholder="输入值">
                </div>
                <button id="store-session">存储到会话</button>
                <button id="read-session">读取会话数据</button>
            </div>
        </div>
        <div class="提示">
            <p>提示：本地存储的数据在关闭浏览器后仍然存在，而会话存储的数据在关闭浏览器标签页后会被清除。</p>
            <p>测试方法：存储数据后，刷新页面，本地存储数据仍在，而会话存储数据会保留。但如果关闭标签页后重新打开，会话存储数据将丢失。</p>
        </div>
        <div id="storage-type-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 过期时间测试 -->
    <div class="测试容器">
        <h2>4. 过期时间测试</h2>
        <div class="输入组">
            <label for="expire-key">键名:</label>
            <input type="text" id="expire-key" placeholder="输入键名" value="temp-data">
        </div>
        <div class="输入组">
            <label for="expire-value">值:</label>
            <input type="text" id="expire-value" placeholder="输入值" value="这是一条临时数据">
        </div>
        <div class="输入组">
            <label for="expire-milliseconds">过期时间(毫秒):</label>
            <input type="number" id="expire-milliseconds" placeholder="输入过期时间" value="5000" min="1000">
        </div>
        <div class="按钮组">
            <button id="store-with-expire">存储带过期时间的数据</button>
            <button id="read-expire-data">立即读取数据</button>
            <button id="read-after-expire">等待过期后读取</button>
        </div>
        <div id="expire-test-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 批量操作测试 -->
    <div class="测试容器">
        <h2>5. 批量操作</h2>
        <div class="按钮组">
            <button id="batch-store">批量存储数据</button>
            <button id="batch-read">批量读取数据</button>
            <button id="batch-delete">批量删除数据</button>
        </div>
        <div id="batch-operation-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 存储信息查询测试 -->
    <div class="测试容器">
        <h2>6. 存储信息查询</h2>
        <div class="按钮组">
            <button id="get-keys">获取所有键名</button>
            <button id="get-values">获取所有值</button>
            <button id="get-entries">获取所有键值对</button>
            <button id="get-size">获取存储大小</button>
            <button id="get-usage">获取存储使用量</button>
        </div>
        <div id="storage-info-result" class="结果显示">操作结果将显示在这里</div>
        <div id="storage-table" class="表格容器"></div>
    </div>

    <!-- 链式调用测试 -->
    <div class="测试容器">
        <h2>7. 链式调用</h2>
        <div class="按钮组">
            <button id="chain-operations">执行链式操作</button>
        </div>
        <div id="chain-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 清空操作测试 -->
    <div class="测试容器">
        <h2>8. 清空操作</h2>
        <div class="按钮组">
            <button id="clear-local">清空本地存储</button>
            <button id="clear-session">清空会话存储</button>
            <button id="clear-expired">清空过期数据</button>
        </div>
        <div id="clear-result" class="结果显示">操作结果将显示在这里</div>
    </div>

    <!-- 引入zh-storage.js -->
    <script type="module">
        // 导入存储模块
        import { 存储 } from '../../zh/前端/zh-storage.js';

        // 确保存储类可在全局访问
        window.存储 = 存储;

        // 更新结果显示的函数
        function 更新结果(elementId, content) {
            const element = document.getElementById(elementId);
            if (element) {
                element.textContent = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
            }
        }

        // 1. 检查存储可用性
        document.getElementById('check-local-storage').addEventListener('click', function() {
            const isAvailable = 存储.是否可用(localStorage);
            更新结果('storage-availability-result', `本地存储 (localStorage) ${isAvailable ? '可用' : '不可用'}`);
        });

        document.getElementById('check-session-storage').addEventListener('click', function() {
            const isAvailable = 存储.是否可用(sessionStorage);
            更新结果('storage-availability-result', `会话存储 (sessionStorage) ${isAvailable ? '可用' : '不可用'}`);
        });

        // 2. 基本存储操作
        const 本地存储 = 存储.本地();

        document.getElementById('store-data').addEventListener('click', function() {
            const 键 = document.getElementById('basic-key').value.trim();
            const 值 = document.getElementById('basic-value').value.trim();
            const 过期时间 = parseInt(document.getElementById('expire-time').value) || undefined;
            
            if (!键) {
                更新结果('basic-operation-result', '请输入键名');
                return;
            }
            
            本地存储.存储(键, 值, 过期时间);
            更新结果('basic-operation-result', `数据已存储: 键='${键}', 值='${值}'${过期时间 ? `, 过期时间=${过期时间}毫秒` : ''}`);
        });

        document.getElementById('read-data').addEventListener('click', function() {
            const 键 = document.getElementById('basic-key').value.trim();
            
            if (!键) {
                更新结果('basic-operation-result', '请输入键名');
                return;
            }
            
            const 值 = 本地存储.读取(键);
            更新结果('basic-operation-result', 值 !== null ? `读取到数据: 值='${值}'` : `键 '${键}' 不存在或已过期`);
        });

        document.getElementById('delete-data').addEventListener('click', function() {
            const 键 = document.getElementById('basic-key').value.trim();
            
            if (!键) {
                更新结果('basic-operation-result', '请输入键名');
                return;
            }
            
            本地存储.删除(键);
            更新结果('basic-operation-result', `已删除键 '${键}' 的数据`);
        });

        document.getElementById('check-data').addEventListener('click', function() {
            const 键 = document.getElementById('basic-key').value.trim();
            
            if (!键) {
                更新结果('basic-operation-result', '请输入键名');
                return;
            }
            
            const 存在 = 本地存储.包含(键);
            更新结果('basic-operation-result', `键 '${键}' ${存在 ? '存在' : '不存在'}`);
        });

        // 3. 本地存储与会话存储对比
        const 会话存储 = 存储.会话();

        document.getElementById('store-local').addEventListener('click', function() {
            const 键 = document.getElementById('local-key').value.trim();
            const 值 = document.getElementById('local-value').value.trim();
            
            if (!键) {
                更新结果('storage-type-result', '请输入本地存储键名');
                return;
            }
            
            本地存储.存储(键, 值);
            更新结果('storage-type-result', `已存储到本地存储: 键='${键}', 值='${值}'`);
        });

        document.getElementById('read-local').addEventListener('click', function() {
            const 键 = document.getElementById('local-key').value.trim();
            
            if (!键) {
                更新结果('storage-type-result', '请输入本地存储键名');
                return;
            }
            
            const 值 = 本地存储.读取(键);
            更新结果('storage-type-result', 值 !== null ? `从本地存储读取: 值='${值}'` : `本地存储中键 '${键}' 不存在或已过期`);
        });

        document.getElementById('store-session').addEventListener('click', function() {
            const 键 = document.getElementById('session-key').value.trim();
            const 值 = document.getElementById('session-value').value.trim();
            
            if (!键) {
                更新结果('storage-type-result', '请输入会话存储键名');
                return;
            }
            
            会话存储.存储(键, 值);
            更新结果('storage-type-result', `已存储到会话存储: 键='${键}', 值='${值}'`);
        });

        document.getElementById('read-session').addEventListener('click', function() {
            const 键 = document.getElementById('session-key').value.trim();
            
            if (!键) {
                更新结果('storage-type-result', '请输入会话存储键名');
                return;
            }
            
            const 值 = 会话存储.读取(键);
            更新结果('storage-type-result', 值 !== null ? `从会话存储读取: 值='${值}'` : `会话存储中键 '${键}' 不存在或已过期`);
        });

        // 4. 过期时间测试
        document.getElementById('store-with-expire').addEventListener('click', function() {
            const 键 = document.getElementById('expire-key').value.trim();
            const 值 = document.getElementById('expire-value').value.trim();
            const 过期毫秒 = parseInt(document.getElementById('expire-milliseconds').value);
            
            if (!键 || isNaN(过期毫秒) || 过期毫秒 <= 0) {
                更新结果('expire-test-result', '请输入有效的键名和过期时间');
                return;
            }
            
            本地存储.存储(键, 值, 过期毫秒);
            更新结果('expire-test-result', `已存储带过期时间的数据: 键='${键}', 值='${值}', ${过期毫秒}毫秒后过期`);
        });

        document.getElementById('read-expire-data').addEventListener('click', function() {
            const 键 = document.getElementById('expire-key').value.trim();
            
            if (!键) {
                更新结果('expire-test-result', '请输入键名');
                return;
            }
            
            const 值 = 本地存储.读取(键);
            更新结果('expire-test-result', 值 !== null ? `数据未过期，读取到: 值='${值}'` : `数据已过期或不存在`);
        });

        document.getElementById('read-after-expire').addEventListener('click', function() {
            const 键 = document.getElementById('expire-key').value.trim();
            const 过期毫秒 = parseInt(document.getElementById('expire-milliseconds').value);
            
            if (!键 || isNaN(过期毫秒)) {
                更新结果('expire-test-result', '请确保已存储带过期时间的数据');
                return;
            }
            
            更新结果('expire-test-result', `等待 ${过期毫秒} 毫秒后读取...`);
            
            setTimeout(() => {
                const 值 = 本地存储.读取(键);
                更新结果('expire-test-result', 值 !== null ? `数据未过期，读取到: 值='${值}'` : `数据已过期或不存在`);
            }, 过期毫秒);
        });

        // 5. 批量操作
        document.getElementById('batch-store').addEventListener('click', function() {
            const 测试数据 = {
                '用户名': '测试用户',
                '年龄': 25,
                '爱好': ['阅读', '编程', '旅行'],
                '设置': { '主题': 'dark', '语言': 'zh-CN' }
            };
            
            本地存储.批量存储(测试数据);
            更新结果('batch-operation-result', `批量存储成功: ${JSON.stringify(测试数据, null, 2)}`);
        });

        document.getElementById('batch-read').addEventListener('click', function() {
            const 结果 = 本地存储.批量读取('用户名', '年龄', '爱好', '设置');
            更新结果('batch-operation-result', `批量读取结果: ${JSON.stringify(结果, null, 2)}`);
        });

        document.getElementById('batch-delete').addEventListener('click', function() {
            本地存储.批量删除('用户名', '年龄', '爱好', '设置');
            更新结果('batch-operation-result', '已批量删除指定键的数据');
        });

        // 6. 存储信息查询
        document.getElementById('get-keys').addEventListener('click', function() {
            const 键列表 = 本地存储.取键();
            更新结果('storage-info-result', `所有键名: ${JSON.stringify(键列表, null, 2)}`);
            
            // 清空表格
            document.getElementById('storage-table').innerHTML = '';
        });

        document.getElementById('get-values').addEventListener('click', function() {
            const 值列表 = 本地存储.取值列表();
            更新结果('storage-info-result', `所有值: ${JSON.stringify(值列表, null, 2)}`);
            
            // 清空表格
            document.getElementById('storage-table').innerHTML = '';
        });

        document.getElementById('get-entries').addEventListener('click', function() {
            const 条目列表 = 本地存储.取条目();
            更新结果('storage-info-result', `所有键值对: ${JSON.stringify(条目列表, null, 2)}`);
            
            // 生成表格
            if (条目列表.length > 0) {
                let 表格HTML = '<table><thead><tr><th>键</th><th>值</th></tr></thead><tbody>';
                
                条目列表.forEach(([键, 值]) => {
                    const 值字符串 = typeof 值 === 'object' ? JSON.stringify(值) : 值;
                    表格HTML += `<tr><td>${键}</td><td>${值字符串}</td></tr>`;
                });
                
                表格HTML += '</tbody></table>';
                document.getElementById('storage-table').innerHTML = 表格HTML;
            } else {
                document.getElementById('storage-table').innerHTML = '没有数据';
            }
        });

        document.getElementById('get-size').addEventListener('click', function() {
            const 大小 = 本地存储.大小();
            更新结果('storage-info-result', `存储项目数量: ${大小}`);
            
            // 清空表格
            document.getElementById('storage-table').innerHTML = '';
        });

        document.getElementById('get-usage').addEventListener('click', function() {
            const 使用量 = 本地存储.存储使用量();
            const 使用量KB = (使用量 / 1024).toFixed(2);
            const 使用量MB = (使用量 / (1024 * 1024)).toFixed(4);
            
            更新结果('storage-info-result', `存储使用量: ${使用量} 字节 (${使用量KB} KB, ${使用量MB} MB)`);
            
            // 清空表格
            document.getElementById('storage-table').innerHTML = '';
        });

        // 7. 链式调用测试
        document.getElementById('chain-operations').addEventListener('click', function() {
            try {
                // 链式调用示例
                本地存储
                    .存储('链式-测试1', '这是链式调用测试值1')
                    .存储('链式-测试2', '这是链式调用测试值2')
                    .批量存储({
                        '链式-批量1': '批量值1',
                        '链式-批量2': '批量值2'
                    });
                
                // 读取并显示结果
                const 结果1 = 本地存储.读取('链式-测试1');
                const 结果2 = 本地存储.读取('链式-测试2');
                const 批量结果 = 本地存储.批量读取('链式-批量1', '链式-批量2');
                
                const 输出 = {
                    '链式-测试1': 结果1,
                    '链式-测试2': 结果2,
                    '批量结果': 批量结果
                };
                
                更新结果('chain-result', `链式调用成功完成: ${JSON.stringify(输出, null, 2)}`);
            } catch (错误) {
                更新结果('chain-result', `链式调用出错: ${错误.message}`);
            }
        });

        // 8. 清空操作
        document.getElementById('clear-local').addEventListener('click', function() {
            if (confirm('确定要清空本地存储吗？此操作不可恢复。')) {
                本地存储.清空();
                更新结果('clear-result', '本地存储已清空');
                document.getElementById('storage-table').innerHTML = '';
            }
        });

        document.getElementById('clear-session').addEventListener('click', function() {
            if (confirm('确定要将会话存储吗？此操作不可恢复。')) {
                会话存储.清空();
                更新结果('clear-result', '会话存储已清空');
            }
        });

        document.getElementById('clear-expired').addEventListener('click', function() {
            本地存储.清空过期数据();
            更新结果('clear-result', '已清空所有过期数据');
        });

        // 暴露所有测试函数到全局作用域，以便直接调用
        window.更新结果 = 更新结果;
        
        // 初始显示存储可用性
        const 本地可用 = 存储.是否可用(localStorage);
        const 会话可用 = 存储.是否可用(sessionStorage);
        更新结果('storage-availability-result', `默认存储状态：本地存储 ${本地可用 ? '可用' : '不可用'}, 会话存储 ${会话可用 ? '可用' : '不可用'}`);
    </script>
</body>
</html>